<template>
  <div class="outline" v-if="isRedoal">
    <heaDer></heaDer>
    <!-- <div class="headertop">
      <div class="imgcenter"><img src="../../../assets/img1.png" alt="" /></div>
      <div class="name">123</div>
    </div> -->
    <div class="main">
      <img :src="img" alt="" />
    </div>
    <div class="titleP">
      亲爱哒，感谢你的支持与陪伴，欢迎推荐新朋友加入
      我们。每成功推荐一位新的伙伴可以获得<span style="color: #ff9500">{{
        singlePoint
      }}</span
      >积分。
    </div>
    <div class="but">
      <el-button round @click="openy">好，马上推荐给小伙伴！</el-button>
    </div>
    <div class="listcard">
      <div>
        已成功推荐<span style="color: #ff9500">{{ netlist.length }}</span
        >位
      </div>
      <div class="incard" v-if="netlist.length > 0">
        <div class="lefta">微信昵称</div>
        <div class="righta">获得积分</div>
        <div style="clear: both"></div>
      </div>
      <div class="incard" v-for="(item, index) in netlist" :key="index">
        <div class="lefta">{{ item.userName }}</div>
        <div class="righta" style="color: #ff9500">{{ item.amount }}</div>
        <div style="clear: both; padding: 0"></div>
      </div>
    </div>
    <div class="masklayer" v-show="maskopen" @click="maskLayer()">
      <!-- <img src="../../../assets/mask.png" alt="" style="width: 100%;height: 100%;"/> -->
      <div class="writeshare flex_m">
        <!--  <div class='tips'>请点击右上三角</div>
        <div class="imgshare">
          <img src="../../../assets/write1.png" alt="" />
        </div> -->
        <div class="tips">请点击右上角···分享给好友</div>
        <div class="imgshare1">
          <img src="../../../assets/share.png" alt="" />
        </div>
        <!-- <div class='tips'>快分享给好友吧~</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import request from "@/utils/request";
import { MessageBox, Toast } from "mint-ui";
import heaDer from "@/components/page/header/header.vue";
import { server } from "@/utils/env";
export default {
  components: {
    heaDer,
  },
  data() {
    return {
      netlist: [],
      maskopen: false,
      userId: 0,
      singlePoint: 0,
      isRedoal: false,
      img: "",
    };
  },
  created() {
    let userId = window.localStorage.getItem("userId");
    if (this.$route.params.time) {
      window.location.reload();
    } else {
      if (this.$route.query.shareUserId != userId) {
        // return
        window.location.href =
          server.domain +
          "attention?shareUserId=" +
          this.$route.query.shareUserId;
      } else {
        this.isRedoal = true;
      }
    }
    // this.getShareInfo()
  },
  async mounted() {
    this.getBG();
    await this.hint();
    await this.getShareList();
    // window.addEventListener('scroll',this.handleScroll,true)
  },
  methods: {
    handleScroll() {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      console.log(scrollTop);
    },
    getBG() {
      return request({
        url: "/generator/image/front/info?id=1",
        method: "get",
      }).then((response) => {
        console.log(response);
        this.img = response.image.image;
      });
    },
    hint() {
      console.log("getinfo", "提示");
      return request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        this.userId = response.user.id;
      });
    },
    getShareList() {
      return request({
        url: "/generator/shareuser/front/sharelist",
        method: "get",
      }).then((response) => {
        this.netlist = response.list;
        this.singlePoint = response.rule.amount;
      });
    },
    openy() {
      this.maskopen = true;
    },
    maskLayer() {
      console.log("关闭车罩层");
      this.maskopen = false;
    },
  },
};
</script>

<style lang="less" scoped>
.outline {
  position: relative;
  min-height: 100vh;
  // padding-bottom: 30px;
}
.headertop {
  display: flex;
  padding: 15px;
}
.headertop .name {
  margin-left: 15px;
  font-size: 16px;
}
.imgcenter {
  width: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
.main {
  // border: 1px solid red;
  padding: 30px 80px;
  img {
    width: 100%;
    height: 100%;
  }
}
.titleP {
  padding: 0 25px 30px 25px;
  font-size: 16px;
}
.but {
  // border: 1px solid red;
  text-align: center;
  margin-bottom: 25px;
  /deep/.el-button.is-round {
    padding: 12px 60px;
    background: #ff9500;
    color: #ffff;
  }
}
.listcard {
  // border: 1px solid red;
  text-align: center;
  font-weight: bold;
}
.incard {
  // display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   width: 70%;
  //   margin: 0 auto;
  div {
    padding: 10px;
  }
}
.masklayer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
.writeshare {
  // border: 1px solid red;
  padding: 15px;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 998;
}
.imgshare {
  // border: 1px solid red;
  // margin-left: 20px;
  width: 55px;
  height: 55px;
  // width: 100px;
  // height: 55px;

  img {
    width: 100%;
    height: 100%;
  }
}
.imgshare1 {
  // border: 1px solid red;
  margin-left: 10px;
  width: 55px;
  height: 55px;
  img {
    width: 100%;
    height: 100%;
  }
}
.lefta {
  width: 50%;
  float: left;
  text-align: center;
}
.righta {
  width: 50%;
  float: right;
  text-align: center;
}
.tips {
  color: #fff;
  font-weight: bold;
  margin: 10px 0;
}
</style>